<template>
    <div>
        <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="addFormRoles">
            <el-input type="hidden" v-model="editForm.id" :disabled="true" style="display:none;"></el-input>
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="editForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="描述信息" prop="remark">
                <el-input type="textarea" v-model="editForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" @click="update()">确 定</el-button>
          <el-button @click="closed()">取 消</el-button>
        </div>
    </div>
</template>
<script>
import { Message } from 'element-ui'
import roleApi from "@/api/role"
export default {
    data () {
        return {
            addFormRoles: {//添加验证规则
                roleName: [
                    { required: true, message: "请输入角色名称", trigger: "blur" },
                    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
                ],
                remark: [
                    { required: true, message: "请输入角色描述信息", trigger: "blur" },
                    { min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur" }
                ]
            } 
        }
    },
    props:{
      editForm: {}
    },
    methods: {
        closed(){
            this.$emit('closeDialog')
        },
        update(){
            roleApi.update(this.editForm).then(res =>{
                Message.success(res.message)
                this.$emit('getRoleList')
                this.closed()
            })
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>